<template>
	<view class="compete">
		<view class="form-item" v-if="loading">
			<view class="compete-margin"></view>
			<view class="item1">
				<u-form>
					<u-form-item label="甲方(送养人)" prop="firstName">
						<u-input v-model="comList.firstName" disabled placeholder="您的真实姓名" />
					</u-form-item>
					<u-form-item label="联系号码" prop="firstPhone">
						<u-input v-model="comList.firstPhone" disabled placeholder="您的手机号码" />
					</u-form-item>
					<u-form-item label="住址" prop="firstAddress">
						<u-input v-model="comList.firstAddress" disabled placeholder="您的具体住址" />
					</u-form-item>
					<u-form-item label="身份证号码" prop="firstIdCard">
						<u-input class="input" disabled v-model="comList.firstIdCard" placeholder="18位居民身份证号码" />
						<image class="img" style="width: 60rpx;height: 40rpx;" src="@/static/img/up2.png"></image>
					</u-form-item>
				</u-form>
			</view>
			<view class="compete-margin"></view>
			<view class="item1">
				<u-form>
					<u-form-item label="乙方(领养人)" prop="secondName">
						<u-input v-model="comList.secondName" disabled placeholder="您的真实姓名" />
					</u-form-item>
					<u-form-item label="联系号码" prop="secondPhone">
						<u-input v-model="comList.secondPhone" disabled placeholder="您的手机号码" />
					</u-form-item>
					<u-form-item label="住址" prop="secondAddress">
						<u-input v-model="comList.secondAddress" disabled placeholder="您的具体住址" />
					</u-form-item>
					<u-form-item label="身份证号码" prop="secondIdCard">
						<u-input class="input" disabled v-model="comList.secondIdCard" placeholder="18位居民身份证号码" />
						<image style="width: 60rpx;height: 40rpx;" class="img" src="@/static/img/up2.png"></image>
					</u-form-item>
				</u-form>
			</view>
			<view class="compete-margin"></view>
			<view class="item3">
				<u-form>
					<u-form-item label="被领养的宠物" prop="name">
						<view class="algin">
							<image style="margin-right: 12rpx;width: 48rpx;height: 48rpx;border-radius: 100%;" :src="comList.avatar"></u-image>
							<view>{{comList.name}}</view>
						</view>
					</u-form-item>
					<u-form-item label="Pid" prop="pid">
						<u-input v-model="comList.pid" disabled />
					</u-form-item>
					<u-form-item label="性别" prop="sex">
						<u-input v-model="comList.sex" disabled />
					</u-form-item>
					<u-form-item label="品种" prop="typeName">
						<u-input class="input" v-model="comList.typeName" disabled />
					</u-form-item>
					<u-form-item label="宠龄" prop="age">
						<u-input class="input" v-model="comList.age" disabled />
					</u-form-item>
					<u-form-item label="状态" prop="health">
						<u-input class="input" v-model="comList.health" disabled />
					</u-form-item>
					<u-form-item label="疫苗" prop="vaccine">
						<u-input class="input" v-model="comList.vaccine" disabled />
					</u-form-item>
					<u-form-item label="驱虫" prop="insect">
						<u-input class="input" v-model="comList.insect" disabled />
					</u-form-item>
					<u-form-item label="绝育" prop="neuter">
						<u-input class="input" v-model="comList.neuter" disabled />
					</u-form-item>
					<u-form-item label="毛量" prop="gross">
						<u-input class="input" v-model="comList.gross" disabled />
					</u-form-item>
					<u-form-item label="体型" prop="body">
						<u-input class="input" v-model="comList.body" disabled />
					</u-form-item>
				</u-form>
			</view>
			<view class="compete-margin"></view>
			<view class="compete-content">
				<view>本着为一条生命负责的态度，双方经友好协商达成协议</view>
				<view>如下:</view>
				<view class="title">一、甲方通过铲屎官平台(以下统称平台)与乙方建立沟通，将宠物(PID: {{comList.pid}}) 无偿赠送给乙方领养。</view>
				<view class="title">二、乙方自愿接受领养甲方宠物，并保证有经挤能力饲养该宠物。</view>
				<view class="title">三、甲方的权利与义务</view>
				<view class="text">
					<view>(1)在乙方接受宠物之前，应提供适当的食物和活动空间，保证其健康。</view>
					<view>(2)向乙方如实告之宠物的健康状况。</view>
					<view>(3)为乙方喂养以及领养提供其他必要的咨询和协助。</view>
				</view>
				<view class="title">四、乙方的权利</view>
				<view class="text">
					<view>(1)在接收前，乙方有权要求甲方提供宠物的健康状况、性格和爱好等真实情况。</view>
					<view>(2)乙方在领养期间， 如果自感做不到以上义务， 可以无条件、 及时将健康干净的宠物返还给甲方，这样可以免除乙方的违约责任。</view>
				</view>
				<view class="title">五、乙方的义务</view>
				<view class="text1" v-for="(item, index) in requireList" :key="index">
					<view>{{item}}</view>
				</view>
				<view class="title">六、交付及风险转移</view>
				<view class="text">
					<view>(1)根据《合同法》相关规定，宠物交付后，甲方不得无故 撤销乙方饲养权。亦即宠物交付乙方后，乙方应悉心饲养。</view>
					<view>(2)宠物交付后，由于侵袭等原因造成他人人身或者财产 损害的，由乙方承担责任，甲方不承担责任。</view>
				</view>
				<view class="title">七、补充条款</view>
				<view class="text">
					<view>(1)本协议自签订之日起生效，自生效日起，任何一方有违 约的行为，另一方可单方面解除本合同。</view>
					<view>(2)如有争议，双方应本着为宠物的健康生活着想，友好态 度协商解决。</view>
					<view>(3)若发生纠纷，双方约定以送养人所在地人民法院管辖处 理此案。</view>
					<view>(4)本协议一式两份，甲乙双方各执一份，签字后生效。</view>
				</view>
			</view>
			<view class="compete-margin"></view>
			<view class="compete-code">
				<view class="table">
					<span>甲方签名</span>
					<image width="260rpx" height="100rpx" :src="comList.firstSignUrl"></image>
				</view>
				<view class="table">
					<span>日期</span>
					<input type="text" :value="comList.firstSignTime" disabled placeholder="签名时间" />
				</view>
				<view class="compete-margin"></view>
				<view class="table">
					<span>乙方签名</span>
					<image width="260rpx" height="100rpx" :src="comList.secondSignUrl"></image>
				</view>
				<view class="table">
					<span>日期</span>
					<input type="text" :value="comList.secondSignTime" disabled placeholder="签名时间" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				agreementId: '',
				comList: {},
				requireList: [],
				loading: false
			}
		},
		onLoad (option) {
			this.agreementId = parseInt(option.agreementId)
		},
		mounted() {
			this.getComDetail()
		},
		methods: {
			// 加载中
			showLoading () {
				this.loading = false
				uni.showLoading({
				    title: '正在加载中',
					mask: true
				});
			},
			// 加载成功
			hideLoading () {
				uni.showToast({
				    title: '加载成功',
					icon: 'success',
					mask: true,
					complete: () =>{
						uni.hideLoading();
						this.loading = true
					}
				});
			},
			getComDetail () {
				this.showLoading()
				this.$request(this.commonApi.comDetail + this.agreementId, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						// 体型
						if (items.data.body === 1) {
							items.data.body = '小型'
						} else if (items.data.body === 2) {
							items.data.body = '中型'
						} else if (items.data.body === 3) {
							items.data.body = '大型'
						} else {
							items.data.body = '未知'
						}
						// 毛量
						if (items.data.gross === 1) {
							items.data.gross = '无毛'
						} else if (items.data.gross === 2) {
							items.data.gross = '短毛'
						} else if (items.data.gross === 3) {
							items.data.gross = '长毛'
						} else {
							items.data.gross = '未知'
						}
						// 健康
						if (items.data.health === 1) {
							items.data.health = '健康'
						} else if (items.data.health === 2) {
							items.data.health = '患病'
						} else if (items.data.health === 3) {
							items.data.health = '残疾'
						} else {
							items.data.health = '未知'
						}
						// 驱虫
						if (items.data.insect === 1) {
							items.data.insect = '未驱虫'
						} else if (items.data.insect === 2) {
							items.data.insect = '已驱虫'
						} else {
							items.data.insect = '未知'
						}
						// 绝育
						if (items.data.neuter === 1) {
							items.data.neuter = '未绝育'
						} else if (items.data.neuter === 2) {
							items.data.neuter = '已绝育'
						} else {
							items.data.neuter = '未知'
						}
						// 疫苗
						if (items.data.vaccine === 1) {
							items.data.vaccine = '未免疫'
						} else if (items.data.vaccine === 2) {
							items.data.vaccine = '免疫中'
						} else if (items.data.vaccine === 3) {
							items.data.vaccine = '已免疫'
						} else {
							items.data.vaccine = '未知'
						}
						// 性别
						if (items.data.sex === 1) {
							items.data.sex = '公'
						} else if (items.data.sex === 0) {
							items.data.sex = '母'
						} else {
							items.data.sex = '未知'
						}
						this.getRequire(items.data.adoptRequire)
						this.comList = items.data
						this.hideLoading()
					}
				})
			},
			getRequire (adoptRequire) {
				this.requireList = []
				let require = adoptRequire.split(',')
				require.pop() // 去掉末尾的元素
				require.shift() // 去掉头部的元素
				let mustList = [
					'●不得给宠物实施不人道且不必要的手术，如:去爪、拨 除犬齿及截耳断尾等。',
					'●为宠物提供宠粮、窝及宠物专用的生活用具、玩具等。提供洁净的饮用水等。',
					'●带宠物出门必须做好安全措施，如拴好牵引绳，不得遗失，逃走。',
					'●乙方应及时向甲方通报宠物发生的重大事项，不得隐瞒。',
					'●宠物年迈之日经甲方同意可执行安乐死，但不得抛尸、食用或者变卖。'
				]
				let requireList = []
				require.map(item => {
					item === '5' ? requireList.push('●宠物适龄后需做绝育手术，不得无故延迟或不做。') : ''
					item === '6' ? requireList.push('●双方同意，甲方有权回访探望宠物，乙方不得借口拒绝。') : ''
					item === '7' ? requireList.push('●宠物的铲屎官主页转移到乙方账号下后，乙方要根据约定按时写日记打卡发布宠物的照片视频。') : ''
					item === '3' ? requireList.push('●乙方提供给宠物居住的环境需安装纱窗、阳台封闭以免宠物发生意外事故。') : ''
					item === '4' ? requireList.push('●定期为宠物沐浴、注射疫苗、驱虫，不得使用洗衣粉等有害物质清洗宠物。') : ''
				})
				this.requireList = [...requireList, ...mustList]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.compete {
		.compete-margin {
			width: 750rpx;
			height: 12rpx;
			background: #F9F9F9;
		}
		.form-item {
			/deep/ .u-form-item {
				padding: 10rpx 30rpx!important;
				position: relative;
			}
			/deep/ .u-input__input {
				text-align: right!important;
			}
			/deep/ .u-form-item--left {
				width: 196rpx!important;
			}
			/deep/ .u-form-item--left__content {
				width: 196rpx!important;
			}
			.item1 {
				background-color: #fff;
				margin-top: 12rpx;
				.img {
					position: absolute;
					top: 20rpx;
					right: 10rpx;
				}
				.input /deep/ .u-input__input {
					margin-right: 50rpx;
				}
			}
			.item3 {
				background-color: #fff;
				margin-top: 12rpx;
				.algin {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
		.compete-content {
			padding: 30rpx;
			.title {
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: bold;
				color: #333333;
				margin: 20rpx 0 20rpx 0;
			}
			.text {
				font-size: 26rpx;
				line-height: 40rpx;
				color: #999999;
			}
			.text1 {
				font-size: 26rpx;
				line-height: 40rpx;
				color: #333;
			}
		}
		.compete-code {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			.table{
				width: 700rpx;
				min-height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
				border-bottom: 1px solid #f6f6f6;
				font-size: 28rpx;
				color: #333333;
				input{
					text-align: right;
				}
				image {
					width: 100rpx;
					height: 150rpx;
					transform: rotate(-90deg);
					margin-right: 30rpx;
				}
			}
		}
	}
</style>
